<template>
  <div id="div">
    <div class="canBox">
      <p>依赖业务</p>
      <div v-for="(item, i) in jsonData.business" :key="i">
        <ul v-for="(items, index) in item" :key="index" class="serviceUl">
          <li>
            <div>
              <span class="leftSpan">服务名称 :</span>
              <span class="rightSpan">{{ items.serviceName }}</span>
            </div>
            <div>
              <span class="leftSpan">开始脚本 :</span>
              <span class="rightSpan">{{ items.startScript }}</span>
            </div>
            <div>
              <span class="leftSpan">结束脚本 :</span>
              <span class="rightSpan">{{ items.stopScript }}</span>
            </div>
            <div>
              <span class="leftSpan">超时等待 :</span>
              <span class="rightSpan">{{ items.checkDelay }} 秒</span>
            </div>
            <div>
              <span class="leftSpan">最少等待 :</span>
              <span class="rightSpan">{{ items.minWaitTime }} 秒</span>
            </div>
            <div v-if="items.checkScript">
              <span class="leftSpan">自定义脚本 :</span>
              <span class="rightSpan">
                {{ items.checkScript.scriptPath }}
              </span>
            </div>
            <div v-if="items.ps">
              <span class="leftSpan">进程检查 :</span>
              <span class="rightSpan">
                <span v-for="(items2, index2) in items.ps" :key="index2">
                  <span v-for="(items3, index3) in items2" :key="index3">{{
                    items3
                  }}</span>
                </span>
              </span>
            </div>
            <div v-if="items.serviceTest">
              <span class="leftSpan">服务检查 :</span>
              <span class="rightSpan">
                <span
                  v-for="(items3, index3) in items.serviceTest"
                  :key="index3"
                >
                  <span v-for="(items4, index4) in items3" :key="index4">{{
                    items4
                  }}</span>
                </span>
              </span>
            </div>
            <div v-if="items.httpTest" class="noFlex">
              <div class="leftDiv">
                <div class="leftDivTitp">HTTP检查 :</div>
              </div>
              <div class="rightDiv">
                <div class="noFlex">
                  <div>
                    <span class="leftSpan">http接口:</span>
                    <span class="rightSpan">{{ items.httpTest.url }}</span>
                  </div>
                  <div>
                    <span class="leftSpan">请求方式:</span>
                    <span class="rightSpan">{{ items.httpTest.method }}</span>
                  </div>
                  <div>
                    <span class="leftSpan">请求参数:</span>
                    <span class="rightSpan">
                      <div v-if="items.httpTest.json" class="noFlex">
                        <div
                          v-for="(item5, key) in JSON.parse(
                            items.httpTest.json
                          )"
                          :key="key"
                        >
                          <span class="leftSpan">{{ key }}:</span>
                          <span class="rightSpan">{{ item5 }}</span>
                        </div>
                      </div>
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="items.dbTest" class="noFlex">
              <div class="leftDiv">
                <div class="leftDivTitp">数据库检查 :</div>
              </div>
              <div class="rightDiv">
                <div class="noFlex">
                  <div>
                    <span class="leftSpan">驱动路径:</span>
                    <span class="rightSpan">{{ items.dbTest.jarPath }}</span>
                  </div>
                  <div>
                    <span class="leftSpan">数据库驱动:</span>
                    <span class="rightSpan">{{ items.dbTest.driver }}</span>
                  </div>
                  <div>
                    <span class="leftSpan">账号:</span>
                    <span class="rightSpan">{{ items.dbTest.username }}</span>
                  </div>
                  <div>
                    <span class="leftSpan">密码:</span>
                    <span class="rightSpan">{{ items.dbTest.password }}</span>
                  </div>
                  <div>
                    <span class="leftSpan">jdbc地址:</span>
                    <span class="rightSpan">{{ items.dbTest.url }}</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="canBox">
      <p>保障设置</p>
      <ul v-for="(item, i) in jsonData.haSettings" :key="i">
        <li>
          <div>
            <span class="leftSpan">服务名称 :</span>
            <span v-show="displayType == 'displayNameA'" class="rightSpan">{{
              item.displayNameA
            }}</span>
            <span v-show="displayType == 'displayNameB'" class="rightSpan">{{
              item.displayNameB
            }}</span>
          </div>
          <div>
            <span class="leftSpan">服务IP :</span>
            <span class="rightSpan">{{ item.virtualIP }}</span>
          </div>
          <div>
            <span class="leftSpan">掩码 :</span>
            <span class="rightSpan">{{ item.subnetMasks }}</span>
          </div>
          <div>
            <span class="leftSpan">网关 :</span>
            <span class="rightSpan">{{ item.ipv4Gateway }}</span>
          </div>
          <div>
            <span class="leftSpan">DNS :</span>
            <span class="rightSpan">
              <span v-for="(items4, index4) in item.dnsServers" :key="index4">{{
                items4
              }}</span>
            </span>
          </div>
          <div v-show="item.hessProxyIp">
            <span class="leftSpan">代理服务IP :</span>
            <span class="rightSpan">{{ item.hessProxyIp }}</span>
          </div>
          <div v-show="item.hessProxyIp">
            <span class="leftSpan">代理服务端口 :</span>
            <span class="rightSpan">{{ item.hessProxyPort }}</span>
          </div>
        </li>
      </ul>
    </div>

    <div class="canBox">
      <p>数据同步</p>
      <ul v-for="(item, i) in jsonData.syncSettings" :key="i" class="serviceUl">
        <li v-if="item.include">
          <div>
            <span class="leftSpan">保障地址 :</span>
            <span class="rightSpan">{{ item.include }}</span>
          </div>
          <div v-show="item.exludesSuffix.length">
            <span class="leftSpan">排除路径 :</span>
            <span class="rightSpan">
              <span v-show="!item.excludes.length"> 无 </span>
              <div v-for="(items, index) in item.excludes" :key="index">
                {{ items }}
              </div>
            </span>
          </div>
          <div v-show="item.exludesSuffix.length">
            <span class="leftSpan">排除文件 :</span>
            <span class="rightSpan">
              <span v-show="!item.exludesSuffix.length"> 无 </span>
              <div v-for="(items2, index2) in item.exludesSuffix" :key="index2">
                {{ items2 }}
              </div>
            </span>
          </div>
          <div>
            <span class="leftSpan">文件追加 :</span>
            <span class="rightSpan">{{ item.append ? "是" : "否" }}</span>
          </div>
        </li>
        <li v-if="item.include">
          <div>
            <span class="leftSpan">设备容量 :</span>
            <span class="rightSpan">{{ item.directoryCapacity }} M</span>
          </div>
          <div>
            <span class="leftSpan">通信端口 :</span>
            <span class="rightSpan">{{ item.communicationPort }}</span>
          </div>
          <div>
            <span class="leftSpan">保障地址 :</span>
            <span class="rightSpan">{{ item.include }}</span>
          </div>
          <div>
            <span class="leftSpan">镜像存储目录 :</span>
            <span class="rightSpan">{{ item.mirrorStorageDirectory }}</span>
          </div>
          <div>
            <span class="leftSpan">挂载目录 :</span>
            <span class="rightSpan">{{ item.mountDirectory }}</span>
          </div>
        </li>
      </ul>
    </div>

    <div class="canBox">
      <p>
        系统监测

        <span>
          <span v-if="jsonData.systemSetting.open" class="flotR">开启</span>
          <span v-else class="flotR closeBtn">关闭</span>
        </span>
      </p>
      <ul>
        <li :class="!jsonData.systemSetting.open ? 'value' : ''">
          <div>
            <span class="leftSpan">磁盘限制 :</span>
            <span v-if="jsonData.systemSetting.open" class="rightSpan">
              <span
                v-show="jsonData.systemSetting.usedDisk"
              >{{ jsonData.systemSetting.usedDisk }} %
              </span>
              <span
                v-show="jsonData.systemSetting.usedDiskSize"
              >{{ jsonData.systemSetting.usedDiskSize }} M
              </span>
            </span>
            <span v-else class="rightSpan value"> -- </span>
          </div>
          <div>
            <span class="leftSpan">CPU限制 :</span>
            <span v-if="jsonData.systemSetting.open" class="rightSpan">
              <span
                v-show="jsonData.systemSetting.usedMem"
              >{{ jsonData.systemSetting.usedMem }} %
              </span>
              <span
                v-show="jsonData.systemSetting.usedMemSize"
              >{{ jsonData.systemSetting.usedMemSize }} M
              </span>
            </span>
            <span v-else class="rightSpan value"> -- </span>
          </div>
          <div>
            <span class="leftSpan">内存限制 :</span>
            <span v-if="jsonData.systemSetting.open" class="rightSpan">
              <span
                v-show="jsonData.systemSetting.usedCpu"
              >{{ jsonData.systemSetting.usedCpu }} %
              </span>
            </span>
            <span v-else class="rightSpan value"> -- </span>
          </div>

          <div>
            <span class="leftSpan">监测间隔 :</span>
            <span v-if="jsonData.systemSetting.open" class="rightSpan">
              <span
                v-show="jsonData.systemSetting.interval"
              >{{ jsonData.systemSetting.interval }} 分钟</span>
            </span>
            <span v-else class="rightSpan value"> -- </span>
          </div>
        </li>
      </ul>
    </div>

    <div class="canBox">
      <p>
        健康监测
        <span>
          <span
            v-if="jsonData.systemTrendSetting.open"
            class="flotR"
          >开启</span>
          <span v-else class="flotR closeBtn">关闭</span>
        </span>
      </p>
      <ul>
        <li :class="!jsonData.systemTrendSetting.open ? 'value' : ''">
          <div>
            <span class="leftSpan">磁盘已使用阈值 :</span>
            <span
              v-if="jsonData.systemTrendSetting.open"
              class="rightSpan"
            >{{ jsonData.systemTrendSetting.diskUsed }} %</span>
            <span v-else class="rightSpan value"> -- </span>
          </div>
          <div>
            <span class="leftSpan">进程数阈值 :</span>
            <span
              v-if="jsonData.systemTrendSetting.open"
              class="rightSpan"
            >{{ jsonData.systemTrendSetting.processNum }} %</span>
            <span v-else class="rightSpan value"> -- </span>
          </div>
          <div>
            <span class="leftSpan">网络连接数阈值 :</span>
            <span
              v-if="jsonData.systemTrendSetting.open"
              class="rightSpan"
            >{{ jsonData.systemTrendSetting.networkNum }} %</span>
            <span v-else class="rightSpan value"> -- </span>
          </div>
          <div>
            <span class="leftSpan">间隔频率 :</span>
            <span
              v-if="jsonData.systemTrendSetting.open"
              class="rightSpan"
            >{{ jsonData.systemTrendSetting.interval }} 分</span>
            <span v-else class="rightSpan value"> -- </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    jsonData: Object,
    displayType: String
  },

  data() {
    return {}
  },
  created() {
    console.log(this.$props.jsonData, '888')
  },
  methods: {}
}
</script>

<style scoped="scoped">
#conten {
  display: flex;
  justify-content: space-between;
}

#conten > div {
  width: 464px;
  height: 550px;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  padding: 10px;
}

#conten > .cenbox {
  width: 100px;
  margin-top: 20px;
  border: 0;
  text-align: center;
}

.title {
  text-align: center;
  padding: 10px;
  font-size: 16px;
}

.spanDom {
  display: inline-block;
  width: 90px;
}

.ywColor {
  color: #67c23a;
}

.topBpx {
  margin-top: 20px;
}

.bzColor {
  color: #1890ff;
}

.canBox {
  border: 1px solid #e3e3e3;
  margin: 4px 0px;
  padding: 2px 10px;
  border-radius: 4px;
}

.canBox p {
  color: #4daaff;
  border-bottom: 1px solid #e3e3e3;
  margin: -2px -10px;
  font-size: 15px;
  height: 30px;
  background-color: antiquewhite;
  line-height: 34px;
  padding-left: 13px;
}

.canBox ul > li > div {
  display: flex;
}

.canBox ul > li .noFlex > div {
  display: flex;
}
.canBox ul > li .noFlex {
  display: block;
  border: 1px dotted #e2e2e2;
  padding: 6px 2px;
  margin: 4px 2px;
  width: 100%;
}

.canBox ul > li .noFlex .leftSpan {
  width: 80px;
}
.canBox ul > li .noFlex .rightSpan {
  flex: auto;
}
.canBox ul > li > div > .leftSpan {
  flex: 1;
}

.canBox ul > li > div > .rightSpan {
  flex: 2.2;
}

.rightSpan > div {
  border-top: 1px solid #f0f0f0;
  padding: 0 10px;
}
.value {
  color: #d0c9c9;
}
.flotR {
  float: right;
}

.serviceUl {
  border-bottom: 1px solid #e6e3e3;
  padding: 4px 0px;
}

.serviceUl:nth-last-child(1) {
  border: 0;
}

.closeBtn {
  color: #f4734b;
  margin-right: 10px;
}
.leftDivTitp {
  background-color: #d4fffe;
  padding: 0 7px;
  border-radius: 4px;
}
</style>
